/**
 * VR特效JS - 用于动态生成高级视觉效果
 */

/* eslint-disable no-undef */

// 生成霓虹粒子数据
export function generateVRParticles(count = 50) {
  const particles = []

  for (let i = 0; i < count; i++) {
    // 随机选择粒子颜色类型
    const colorClass = ['blue', 'purple', 'pink'][Math.floor(Math.random() * 3)]

    // 随机化粒子位置、大小和动画
    const size = Math.random() * 4 + 2
    const left = Math.random() * 100
    const animationDuration = Math.random() * 20 + 10
    const animationDelay = Math.random() * 10

    particles.push({
      id: `particle-${i}`,
      colorClass,
      style: {
        width: `${size}px`,
        height: `${size}px`,
        left: `${left}%`,
        animationDuration: `${animationDuration}s`,
        animationDelay: `${animationDelay}s`,
      },
    })
  }

  return particles
}

// 生成霓虹数字雨数据
export function generateDigitalRain(columns = 20) {
  const rainColumns = []

  for (let i = 0; i < columns; i++) {
    // 随机位置和动画
    const left = (i / columns) * 100
    const animationDuration = Math.random() * 15 + 5
    const animationDelay = Math.random() * 5

    const drops = []
    // 为每列添加随机数量的雨滴
    const dropCount = Math.floor(Math.random() * 5) + 3

    for (let j = 0; j < dropCount; j++) {
      const top = (j / dropCount) * 100
      const height = Math.random() * 15 + 5
      const animationDelay = Math.random() * 2

      drops.push({
        id: `drop-${i}-${j}`,
        style: {
          top: `${top}%`,
          height: `${height}px`,
          animationDelay: `${animationDelay}s`,
        },
      })
    }

    rainColumns.push({
      id: `column-${i}`,
      style: {
        left: `${left}%`,
        animationDuration: `${animationDuration}s`,
        animationDelay: `${animationDelay}s`,
      },
      drops,
    })
  }

  return rainColumns
}

// 为文本创建打字机效果
export function createTypingEffectData(text, speed = 100) {
  return {
    text,
    speed,
  }
}

// 应用VR效果的Vue组合式API
export function useVREffects() {
  const particles = generateVRParticles(80)
  const rainColumns = generateDigitalRain(20)

  return {
    particles,
    rainColumns,
    createTypingEffectData,
  }
}

// 添加全页扫描线效果
export function addScanEffect(containerId) {
  const container = document.getElementById(containerId)
  if (!container) return

  const scanEffect = document.createElement('div')
  scanEffect.className = 'vr-scan-effect'
  container.appendChild(scanEffect)
}

// 添加电路板背景
export function addCircuitBackground(containerId) {
  const container = document.getElementById(containerId)
  if (!container) return

  const circuitBg = document.createElement('div')
  circuitBg.className = 'vr-circuit-bg'
  container.appendChild(circuitBg)
}

// 添加3D网格背景
export function addGridBackground(containerId) {
  const container = document.getElementById(containerId)
  if (!container) return

  const gridBg = document.createElement('div')
  gridBg.className = 'vr-grid-bg'
  container.appendChild(gridBg)
}

// 创建全息投影效果
export function addHologramEffect(elementId) {
  const element = document.getElementById(elementId)
  if (!element) return

  element.className += ' vr-hologram'
}

// 创建3D空间网格
export function create3DSpaceGrid(containerId) {
  const container = document.getElementById(containerId)
  if (!container) return

  const spaceGrid = document.createElement('div')
  spaceGrid.className = 'vr-space-grid'

  const gridPlane = document.createElement('div')
  gridPlane.className = 'vr-grid-plane'

  spaceGrid.appendChild(gridPlane)
  container.appendChild(spaceGrid)
}

// 创建光子流效果
export function createPhotonStream(containerId, count = 20) {
  const container = document.getElementById(containerId)
  if (!container) return

  const photonStream = document.createElement('div')
  photonStream.className = 'vr-photon-stream'

  for (let i = 0; i < count; i++) {
    const photon = document.createElement('div')
    photon.className = 'vr-photon'

    // 随机位置和角度
    const left = Math.random() * 100
    const delay = Math.random() * 10
    const duration = 5 + Math.random() * 10
    const rotation = (Math.random() - 0.5) * 20

    photon.style.left = `${left}%`
    photon.style.animationDelay = `${delay}s`
    photon.style.animationDuration = `${duration}s`
    photon.style.transform = `rotate(${rotation}deg)`

    photonStream.appendChild(photon)
  }

  container.appendChild(photonStream)
}

// 创建量子波动效果
export function createQuantumWaves(containerId, count = 5) {
  const container = document.getElementById(containerId)
  if (!container) return

  const quantumWaves = document.createElement('div')
  quantumWaves.className = 'vr-quantum-waves'

  for (let i = 0; i < count; i++) {
    const wave = document.createElement('div')
    wave.className = 'vr-wave'

    // 随机起始位置
    const left = 20 + Math.random() * 60
    const top = 20 + Math.random() * 60
    const delay = Math.random() * 15
    const duration = 10 + Math.random() * 10

    wave.style.left = `${left}%`
    wave.style.top = `${top}%`
    wave.style.animationDelay = `${delay}s`
    wave.style.animationDuration = `${duration}s`

    quantumWaves.appendChild(wave)
  }

  container.appendChild(quantumWaves)
}

// 创建数据矩阵效果
export function createDataMatrix(containerId, columns = 15) {
  const container = document.getElementById(containerId)
  if (!container) return

  const dataMatrix = document.createElement('div')
  dataMatrix.className = 'vr-data-matrix'

  // 可能的字符
  const chars = '01'.split('')

  for (let i = 0; i < columns; i++) {
    const column = document.createElement('div')
    column.className = 'vr-data-column'

    // 随机位置和速度
    const left = Math.random() * 100
    const duration = 10 + Math.random() * 20
    const delay = Math.random() * 10

    column.style.left = `${left}%`
    column.style.animationDuration = `${duration}s`
    column.style.animationDelay = `${delay}s`

    // 给每列添加10-20个随机数据位
    const bitsCount = 10 + Math.floor(Math.random() * 10)

    for (let j = 0; j < bitsCount; j++) {
      const bit = document.createElement('div')
      bit.className = 'vr-data-bit'
      bit.textContent = chars[Math.floor(Math.random() * chars.length)]
      bit.style.setProperty('--delay', j)

      column.appendChild(bit)
    }

    dataMatrix.appendChild(column)
  }

  container.appendChild(dataMatrix)
}

// 创建三角形网络背景
export function createTriangleNetwork(containerId) {
  const container = document.getElementById(containerId)
  if (!container) return

  const triangleNetwork = document.createElement('div')
  triangleNetwork.className = 'vr-triangle-network'

  container.appendChild(triangleNetwork)
}

// 创建科技接口扫描线
export function createInterfaceScan(elementId) {
  const element = document.getElementById(elementId)
  if (!element) return

  // 确保元素是相对定位
  if (getComputedStyle(element).position === 'static') {
    element.style.position = 'relative'
  }

  const interfaceScan = document.createElement('div')
  interfaceScan.className = 'vr-interface-scan'

  const scanLine = document.createElement('div')
  scanLine.className = 'vr-scan-line'

  interfaceScan.appendChild(scanLine)
  element.appendChild(interfaceScan)
}

// 创建HUD框架效果
export function createHUDFrame(elementId) {
  const element = document.getElementById(elementId)
  if (!element) return

  // 确保元素是相对定位
  if (getComputedStyle(element).position === 'static') {
    element.style.position = 'relative'
  }

  element.classList.add('vr-hud-frame')

  // 添加四个角落元素
  const cornerTL = document.createElement('div')
  cornerTL.className = 'corner-tl'

  const cornerTR = document.createElement('div')
  cornerTR.className = 'corner-tr'

  const cornerBL = document.createElement('div')
  cornerBL.className = 'corner-bl'

  const cornerBR = document.createElement('div')
  cornerBR.className = 'corner-br'

  element.appendChild(cornerTL)
  element.appendChild(cornerTR)
  element.appendChild(cornerBL)
  element.appendChild(cornerBR)
}

// 将所有高级特效应用于页面元素
export function applyAdvancedEffects(containerId = 'app') {
  const container = document.getElementById(containerId)
  if (!container) return

  // 应用容器级背景特效
  createPhotonStream(containerId, 30)
  createQuantumWaves(containerId, 5)
  createTriangleNetwork(containerId)

  // 为特定部分添加特效
  const sections = document.querySelectorAll(
    '.partners-section, .news-section, .stats-section, .vr-devices-section',
  )
  sections.forEach((section, index) => {
    const id = section.id || `vr-section-${index}`
    if (!section.id) section.id = id

    if (index % 2 === 0) {
      create3DSpaceGrid(id)
    } else {
      createDataMatrix(id, 10)
    }
  })

  // 为卡片和面板添加高级效果
  const cards = document.querySelectorAll('.vr-card, .feature-card, .testimonial-card, .news-card')
  cards.forEach((card, index) => {
    const id = card.id || `vr-card-${index}`
    if (!card.id) card.id = id

    createInterfaceScan(id)
  })

  // 为统计项添加HUD框架
  const statItems = document.querySelectorAll('.stat-item')
  statItems.forEach((item, index) => {
    const id = item.id || `stat-item-${index}`
    if (!item.id) item.id = id

    createHUDFrame(id)
  })
}

// 增强初始化函数
export function initVREffects(containerId = 'app') {
  // 为整个应用添加基础特效
  const container = document.getElementById(containerId)
  if (!container) return

  // 添加动态粒子效果
  const particles = generateVRParticles(80)
  let particlesContainer = container.querySelector('.vr-particles-container')
  if (!particlesContainer) {
    particlesContainer = document.createElement('div')
    particlesContainer.className = 'vr-particles-container'
    container.appendChild(particlesContainer)
  }
  particlesContainer.innerHTML = ''
  particles.forEach(p => {
    const el = document.createElement('div')
    el.className = `vr-particle ${p.colorClass}`
    Object.assign(el.style, p.style)
    particlesContainer.appendChild(el)
  })

  // 添加电路板背景
  addCircuitBackground(containerId)

  // 添加扫描线效果
  addScanEffect(containerId)

  // 添加高级背景特效
  applyAdvancedEffects(containerId)

  // 为所有带有特定类的元素应用特效
  const elements = container.querySelectorAll('.vr-enable-effects')
  elements.forEach((element) => {
    const id = element.id || `vr-element-${Math.random().toString(36).substring(2, 9)}`
    if (!element.id) element.id = id

    // 根据元素的data属性添加特定效果
    if (element.dataset.vrHologram === 'true') {
      addHologramEffect(id)
    }

    if (element.dataset.vrTyping === 'true') {
      createTypingEffect(id, element.textContent)
    }
  })
}
